<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport"
	content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/libs/yepnope.1.5.4-min.js"></script>
<script type="text/javascript" src="js/includes.js"></script>

<title>Fullsteam</title>
</head>
<body>
<!-- 
  <a href="javascript:start_swipe()">DEBUG</a>
<div id="debug">Debug...</div>
 -->

	<div id="screen_login">
		<div data-role="header">
			<img src="img/banner.png" style="width: 100%;"/>
		</div>
		<div data-role="content">
			<form action="javascript:connect()">
				<div data-role="fieldcontain" class="ui-hide-label">
					<label for="username">Username:</label> <input type="text"
						name="username" id="username" value="Simon" placeholder="Username" />
				</div>
				<div data-role="fieldcontain" class="ui-hide-label">
					<label for="ip">Server IP:</label> <input type="text" name="ip"
						id="ip" value="127.0.0.1" placeholder="Server IP" />
				</div>
				<div data-role="fieldcontain" class="ui-hide-label">
					<label for="port">Port:</label> <input type="text" name="port"
						id="port" value="8000" placeholder="Port" />
				</div>
				<button type="submit" class="ui-btn-hidden"
					id="submit">Connect</button>
			</form>
			<div data-role="controlgroup">
			<a href="javascript:read_qrcode()" data-role="button">Read QR Code</a>
			</div>
		</div>
	</div>
	<div id="screen_game_menu" style="display:none">
		<div data-role="header">
			<img src="img/banner.png" style="width: 100%;"/>
		</div>
		<div data-role="controlgroup">
		<a href="javascript:send_ready()" data-role="button">Join Game</a>
		<a href="javascript:show_about()" data-role="button">About</a>
		<a href="javascript:exit()" data-role="button">Exit</a>
		</div>
	
	</div>
	<div id="screen_game_shake" style="display:none">
		<div data-role="header">
			<h1>Chop wood</h1>
		</div>
		<img id="axt" src="img/axt.png" style="width: 100%;" />
	</div>
	<div id="screen_game_button" style="display:none">
		<div data-role="header">
			<h1>You had one job</h1>
		</div>
		<a id="game_button" href="" data-role="button">Press Me!</a>
	</div>
	<div id="screen_game_decide" style="display:none">
		<div data-role="header">
			<h1>Decide</h1>
		</div>
		IMPLEMENT ME!
	</div>
	<div id="screen_game_slider" style="display:none">
		<div data-role="header">
			<h1>Slider</h1>
		</div>
	<form>
		<div data-role="fieldcontain">
		<label for="slider">Input slider:</label>
	 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
	 	</div>
 	</form>

	</div>
	<div id="screen_game_shovel" style="display:none; text-align:center">
		<div data-role="header">
			<h1>Shovel coal</h1>
		</div>
			<img id="shovel" src="img/shovel.png" style="width: 100%;" alt="Shovel" />
	</div>
	
	<div id="screen_about" style="display:none">
		<div data-role="header">
			<h1>About</h1>
			<img src="img/logo.png" style="width:100%" />
		</div>
	</div>


	<div id="screen_game_image_quiz" style="display:none">
		<div data-role="header">
			<h1>Image quiz</h1>
		</div>
		<div id="image_container"></div>
	</div>
	
	<div id="screen_game_swipe" style="display:none">
		<div data-role="header">
			<h1>Swipe</h1>
		</div>
		<div style="margin-top:50px">
		<img id="swipe" src="img/swipe.png" style="width:100%" />
		</div>
	</div>

</body>
</html>
